<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
    <span v-text="msg">{{msg}}</span>
    <span v-html="html"></span>
    <textarea name="" id="" cols="30" rows="10" v-model="textarea">

    </textarea>
    <span v-html="textarea"></span>
    <span v-if="textarea==='1'">1000</span>
    <span v-else-if="textarea==='2'">25</span>
    <span v-else>其他</span>
    <span @click="myAlert(1)">弹窗</span>
    <span v-on="myAlert(2)">弹窗</span>>

    </div>
  
    <script>
        
        // v-text->缩略写法{{}} 二者都存在的话，只会绑定显示一个值，不会重叠显示
        // v-html -> 解析html标签并且展示效果
        // v-if v-else v-else-if
        // 如果一个元素需要反复展示和隐藏 使用v-show 否则用v-if
        // v-on:用来绑定事件-> @
        // v-bind:标签元素缩写
        const App = {
            data(){
                return {
                    textarea: '',
                    msg: 'msg',
                    html: "<h2>1123</h2>"
                }
            },methods:{
                myAlert(msg) {
                alert(msg)
                }
            },
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>
</html>